<template>
	<div class="default-main ba-table-box">
		<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

		<!-- 表格顶部菜单 -->
		<TableHeader :buttons="['refresh', 'add', 'comSearch', 'quickSearch', 'columnDisplay']" >
<!--			<el-button :loading="tongbuloading" @click="kaishitongbu" type="primary">开始同步</el-button>-->
<!--			<el-button :loading="kaishifafngloading" @click="kaishifafng" type="success">开始发放</el-button>-->

		</TableHeader>

		<!-- 表格 -->
		<!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
		<Table ref="tableRef" />

		<!-- 表单 -->
		<PopupForm />
		<el-dialog v-model="dialogVisible" title="领取用户">
			<room-user :id="id" v-if="dialogVisible" />
		</el-dialog>

	</div>
</template>

<script setup lang="ts">
import { ref, provide } from "vue"
import baTableClass from "/@/utils/baTable"
import PopupForm from "./popupForm.vue"
import Table from "/@/components/table/index.vue"
import TableHeader from "/@/components/table/header/index.vue"
import { defaultOptButtons } from "/@/components/table"
import { baTableApi } from "/@/api/common"
import { concat } from "lodash-es"
import RoomUser from "/@/views/room/bill/index.vue"
import createAxios from "/@/utils/axios"
import { ElNotification } from "element-plus"

//表单按钮
let optButtons: OptButton[] = [
	{
		render: "tipButton",
		name: "down",
		title: "红包记录",
		text: "红包记录",
		type: "warning",
		icon: "",
		class: "table-row ",
		disabledTip: false,
		click: function (a) {
			getUser(a)
		}
	}
]
optButtons = concat(optButtons, defaultOptButtons(["edit", "delete"]))

const tableRef = ref()
const baTable = new baTableClass(
	new baTableApi("/admin_api/room/"),
	{
		column: [
			{ type: "selection", align: "center", operator: false },
			// { label: "ID", prop: "id", align: "center", operator: "=", operatorPlaceholder: "查询", width: 70 },
			{ label: "直播间ID", prop: "room_id", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			// { label: "直播间地址", prop: "link", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "标题", prop: "title", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "观看时长", prop: "watch_time", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			// {
			// 	label: "观看时长",
			// 	prop: "watch_time",
			// 	align: "center",
			// 	operator: false,
			// 	width: 200,
			// 	render: "customTemplate",
			// 	customTemplate: (row: TableRow, field: TableColumn, value: any) => {
			// 		let rule = JSON.parse(row.watch_time)
			// 		let html = ""
			// 		html += "<table style='margin: 0 auto'>"
			// 		rule.forEach(item => {
			// 			html += "     <tr>"
			// 			html += "         <td>"
			// 			html += "满："+item.expend+"分钟"
			// 			html += "</td>"
			// 			html += "         <td>"
			// 			html += "得："+item.amount+"元"
			// 			html += "</td>"
			// 			html += "     </tr>"
			// 		})
			//
			//
			// 		html += "</table>"
			// 		return html
			// 	}
			// },
			{
				label: "红包金额",
				prop: "rule",
				align: "center",
				operator: false,
				width: 200,
				render: "customTemplate",
				customTemplate: (row: TableRow, field: TableColumn, value: any) => {
					let rule = JSON.parse(row.rule)
					let html = ""
					html += "<table style='margin: 0 auto'>"
					rule.forEach(item => {
						html += "     <tr>"
						html += "         <td>"
						html += "满："+item.expend+"元"
						html += "</td>"
						html += "         <td>"
						html += "得："+item.amount+"元"
						html += "</td>"
						html += "     </tr>"
					})


					html += "</table>"
					return html
				}
			},
			// { label: "红包总数", prop: "total", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },

			{ label: "已发放数量",width: 100, prop: "grant_total", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "已发放金额",width: 100, prop: "grant_amount", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },


			{
				label: "创建时间",
				prop: "create_time",
				align: "center",
				render: "datetime",
				sortable: "custom",
				operator: "RANGE",
				width: 160
			},
			{
				label: "修改时间",
				prop: "update_time",
				align: "center",
				render: "datetime",
				sortable: "custom",
				operator: "RANGE",
				width: 160
			},
			{
				label: "状态 启用/禁用",
				prop: "status",
				align: "center",
				width: 120,
				render: "switch",
				operator: "=", //0 未发放 1已发放 2发放失败
				replaceValue: { "0": "关闭", "1": "启用" }
			},
			{
				label: "发放状态",
				prop: "grant_status",
				align: "center",
				render: "tag",
				replaceValue: { 0: "未发放", 1: "正在同步会员信息",2:"正在发放",3:"发放完成" }
			},
			{
				label: "手动同步",
				align: "center",
				width: 210,
				render: "buttons",
				buttons: [
					{
						render: "confirmButton",
						name: "down",
						title: "同步用户",
						text: "同步用户",
						type: "primary",
						icon: "el-icon-SuccessFilled",
						class: "table-row ",
						disabledTip: false,
						popconfirm: {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							confirmButtonType: "primary",
							title: "是否确定要执行该操作"
						},
						click: function (a) {
							createAxios({
								url: "/admin_api/room/kaishitongbu",
								method: "GET",
								params: {
									room_id: a.room_id
								}
							}).then((res) => {
								ElNotification({
									message: res.msg,
									type: "success"
								})
								baTable.getIndex()
							})
						},
					},
					{
						render: "confirmButton",
						name: "down",
						title: "开始发放",
						text: "开始发放",
						type: "warning",
						icon: "el-icon-SuccessFilled",
						class: "table-row ",
						disabledTip: false,
						popconfirm: {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							confirmButtonType: "primary",
							title: "是否确定要执行该操作"
						},
						click: function (a) {
							createAxios({
								url: "/admin_api/room/kaishifafang",
								method: "GET",
								params: {
									room_id: a.room_id
								}
							}).then((res) => {
								ElNotification({
									message: res.msg,
									type: "success"
								})
								baTable.getIndex()
							})
						},
					}
				],
				operator: false
			},
			{
				label: "操作",
				align: "center",
				width: 170,
				render: "buttons",
				buttons: optButtons,
				operator: false
			}
		],
		dblClickNotEditColumn: [undefined]
	},
	{
		defaultItems: {
			total: 100,
			money: 0.3,
			watch_time: 40,
			c_id: 40,
			status: "1"
		}
	}
)

baTable.mount()
baTable.getIndex()

provide("baTable", baTable)

//弹出
const dialogVisible = ref(false)
//给子组件定义属性
const id = ref()
const getUser = (a) => {
	//子组件属性复制
	id.value = a.room_id
	dialogVisible.value = true
}

const tongbuloading = ref(false);

const kaishitongbu = () => {
	tongbuloading.value = true
	createAxios({
		url: '/admin_api/room/kaishitongbu',
		method: 'get',
	}).then(res =>{
		tongbuloading.value = false
	})
}

const kaishifafngloading = ref(false);
const kaishifafng = () => {
	kaishifafngloading.value = true
	createAxios({
		url: '/admin_api/room/kaishifafang',
		method: 'get',
	}).then(res =>{
		kaishifafngloading.value = false
	})
}

</script>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
	name: "user/user"
})
</script>

<style scoped lang="scss"></style>
